// @ts-nocheck
import { IconLoader } from "@codexteam/icons"
import styles from "./index.module.less"
import { make } from "../../utils/dom"
import { imgOcr } from "./api"

class OCR {
    static get toolbox() {
        return {
            title: "Ocr",
            icon: `<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15.5765 20.5941L15.429 19.8588L15.5765 20.5941ZM15.0158 20.7065L15.1632 21.4419L15.0158 20.7065ZM9.15005 20.717L9.00526 21.4529H9.00526L9.15005 20.717ZM8.42763 20.5748L8.57242 19.8389H8.57242L8.42763 20.5748ZM3.75 14.1448C3.75 13.7306 3.41421 13.3948 3 13.3948C2.58579 13.3948 2.25 13.7306 2.25 14.1448H3.75ZM21.75 14.1448C21.75 13.7306 21.4142 13.3948 21 13.3948C20.5858 13.3948 20.25 13.7306 20.25 14.1448H21.75ZM8.42355 3.40586L8.27614 2.67049L8.27614 2.67049L8.42355 3.40586ZM8.98423 3.29347L9.13164 4.02884L8.98423 3.29347ZM14.85 3.28304L14.7052 4.01893L14.85 3.28304ZM15.5724 3.42517L15.7171 2.68927V2.68927L15.5724 3.42517ZM20.25 9.85517C20.25 10.2694 20.5858 10.6052 21 10.6052C21.4142 10.6052 21.75 10.2694 21.75 9.85517H20.25ZM2.25 9.85518C2.25 10.2694 2.58579 10.6052 3 10.6052C3.41421 10.6052 3.75 10.2694 3.75 9.85518H2.25ZM15.429 19.8588L14.8684 19.9712L15.1632 21.4419L15.7239 21.3295L15.429 19.8588ZM9.29483 19.9811L8.57242 19.8389L8.28285 21.3107L9.00526 21.4529L9.29483 19.9811ZM14.8684 19.9712C13.0304 20.3396 11.1342 20.343 9.29483 19.9811L9.00526 21.4529C11.0376 21.8527 13.1324 21.849 15.1632 21.4419L14.8684 19.9712ZM2.25 14.1448C2.25 17.6397 4.7894 20.6234 8.28285 21.3107L8.57242 19.8389C5.7495 19.2835 3.75 16.8901 3.75 14.1448H2.25ZM20.25 14.1448C20.25 16.8938 18.2534 19.2926 15.429 19.8588L15.7239 21.3295C19.2165 20.6294 21.75 17.6413 21.75 14.1448H20.25ZM8.57095 4.14123L9.13164 4.02884L8.83682 2.5581L8.27614 2.67049L8.57095 4.14123ZM14.7052 4.01893L15.4276 4.16106L15.7171 2.68927L14.9947 2.54714L14.7052 4.01893ZM9.13164 4.02884C10.9696 3.66042 12.8658 3.65705 14.7052 4.01893L14.9947 2.54714C12.9624 2.1473 10.8676 2.15102 8.83682 2.5581L9.13164 4.02884ZM21.75 9.85517C21.75 6.36025 19.2106 3.3766 15.7171 2.68927L15.4276 4.16106C18.2505 4.71646 20.25 7.10993 20.25 9.85517H21.75ZM3.75 9.85518C3.75 7.10618 5.74663 4.70738 8.57095 4.14123L8.27614 2.67049C4.78351 3.3706 2.25 6.35873 2.25 9.85518H3.75Z" fill="#363853"/>
        <path d="M6.6329 12.0472C6.25438 12.2154 6.08391 12.6586 6.25214 13.0371C6.42037 13.4157 6.86359 13.5861 7.2421 13.4179L6.6329 12.0472ZM7.88785 12.3102L8.19245 12.9955L8.19245 12.9955L7.88785 12.3102ZM16.1122 12.3102L15.8075 12.9955V12.9955L16.1122 12.3102ZM16.7579 13.4179C17.1364 13.5861 17.5796 13.4157 17.7479 13.0371C17.9161 12.6586 17.7456 12.2154 17.3671 12.0472L16.7579 13.4179ZM7.2421 13.4179L8.19245 12.9955L7.58324 11.6248L6.6329 12.0472L7.2421 13.4179ZM15.8075 12.9955L16.7579 13.4179L17.3671 12.0472L16.4168 11.6248L15.8075 12.9955ZM8.19245 12.9955C10.6165 11.9182 13.3835 11.9182 15.8075 12.9955L16.4168 11.6248C13.6049 10.3751 10.3951 10.3751 7.58324 11.6248L8.19245 12.9955Z" fill="#0095FF"/>
        </svg>`,
        }
    }

    static get isReadOnlySupported() {
        return true
    }

    constructor({ data, api, config, readOnly }) {
        this.data = {
            text: data.text,
        }

        this.api = api

        this.readOnly = readOnly

        this.wrapper = undefined
    }

    render() {
        this.wrapper = make("div", styles["cx-custom-aiWrite"])

        if (this.data && this.data.text) {
            const wrap = make("div", styles.wrap, { innerHTML: this.data.text })
            const applyBtn = make("div", styles.applyBtn, { innerHTML: "应用" })
            this.wrapper.append(wrap, applyBtn)
            applyBtn.addEventListener(
                "click",
                () => {
                    const curIdx = this.api.blocks.getCurrentBlockIndex()
                    // const curBlock = this.api.blocks.getBlockByIndex(curIdx);
                    this.api.blocks.insert(
                        "paragraph",
                        {
                            text: this.data.text,
                        },
                        null,
                        curIdx,
                        true
                    )
                    this.api.blocks.delete(curIdx + 1)
                },
                false
            )
        } else {
            // 创建输入框, 按钮
            const controlBox = make("div", styles.controlBox)
            const saveBtn = make("div", styles.saveBtn, { innerText: "上传图片" })
            controlBox.append(saveBtn)
            this.wrapper.append(controlBox)

            // 监听编辑和保存事件
            this.api.listeners.on(
                saveBtn,
                "click",
                () => {
                    const uploadFileFn = (cb: (data: any) => void) => {
                        const fileDom = make("input", "", { type: "file" })
                        fileDom.style.display = "none"
                        document.body.append(fileDom)
                        fileDom.click()
                        fileDom.addEventListener("change", async (event: any) => {
                            // 处理文件选择事件
                            const file = event.target.files[0]
                            const data = new FormData()
                            data.set("file", file)
                            cb && cb(data)
                            document.body.removeChild(fileDom)
                        })
                    }
                    uploadFileFn((data) => {
                        // @ts-ignore
                        saveBtn.innerHTML = `${IconLoader} 正在识别解析中......`
                        saveBtn.style.pointerEvents = "none"
                        // ocr 识别接口逻辑
                        imgOcr(data).then((res: any) => {
                            const text = res.output || ""
                            this.update(text)
                        })
                    })
                },
                false
            )
        }

        return this.wrapper
    }

    update(text) {
        const curIdx = this.api.blocks.getCurrentBlockIndex()
        const curBlock = this.api.blocks.getBlockByIndex(curIdx)
        this.api.blocks.update(curBlock.id, {
            text,
        })
    }

    save(blockContent) {
        return this.data
    }

    static get sanitize() {
        return {
            text: true,
        }
    }
}

export default OCR
